<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>{% block title %}{{ title }}{% endblock %}</title> 
{% stylesheets
'css/bootstrap.css' 'css/custom.css' 'css/font-awesome.css' 'css/crown.css' filter='cssrewrite' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %} 

{% block javascripts %}
<script type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
{% javascripts 'js/bootstrap.js' 'js/holder.js' %}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
<script type="text/javascript">
$(document).ready(function(){
	$('.popover-sign-in').popover({html: true, container: 'body'});
	
	$('.popover-sign-in').on('shown.bs.popover', function () {
	    $('#btn-sign-in').click(function(e){
		    $('#sign-in-loading-indicator').show();
	    	$('#sign-in-error').hide();
	        e.preventDefault();
	        $.ajax({
	            type        : $('form').attr( 'method' ),
	            url         : '{{ path("fos_user_security_check") }}',
	            data        : $('form').serialize(),
	            dataType    : "json",
	            success     : function(data, status, object) {
	                if(data.success) {
	                	$('#sign-in-success').show('fast');
	                	window.location.replace(data.url);
					} else {
	                	$('#sign-in-error').html(data.message);
	                	$('#sign-in-error').show('fast');
					}
	                $('#sign-in-loading-indicator').hide();
	            },
	            error: function(data, status, object){
	                console.log(data.message);
	                $('#sign-in-loading-indicator').hide();
	            }
	        });
	    });
	});
	
});
</script>
</head>

<body>
	<div class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
		<div class="container">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse"
					data-target="#navbar-collapse1">
					<span class="sr-only">Toggle navigation</span> <span
						class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="{{ path('lolol_app_homepage') }}">{{ title }}</a>
			</div>
			

			<!-- Collect the nav links, forms, and other content for toggling -->
			<div class="collapse navbar-collapse" id="navbar-collapse1">
				<ul class="nav navbar-nav">
				<li class="{{ app.request.attributes.get('_route') starts with 'lolol_ranking' ? 'active' }}"><a href="#"><i class="fa fa-list-ol"></i> {{ 'menu.ranking'|trans }}</a></li>
				{% if is_granted("IS_AUTHENTICATED_REMEMBERED") %}
					<!-- Overview -->
					<li class="{ app.request.attributes.get('_route') starts with 'lolol_overview' ? 'active' }}"><a href="#"><i class="fa fa-globe"></i> {{ 'menu.overview'|trans }}</a></li>
					<!-- Battle -->
					<li class="dropdown {{ app.request.attributes.get('_route') starts with 'lolol_battle' ? 'active' }}">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa crown icon-crown"></i> {{ 'menu.battle'|trans }}
								<b class="caret"></b>
						</a>
						<ul class="dropdown-menu" role="menu"
							aria-labelledby="dropdownMenu1">
							<li role="presentation"><a role="menuItem" href="{{ path('lolol_battle_attack') }}"><i class="fa fa-bolt fa-fw"></i> {{ 'menu.battle.attack'|trans }}</a></li>
							<li role="presentation"><a role="menuItem" href="{{ path('lolol_battle_defense') }}"><i class="fa fa-shield fa-fw"></i> {{ 'menu.battle.defense'|trans }}</a></li>
						</ul>
					</li>
					<!-- Shop -->
					<li class="{{ app.request.attributes.get('_route') starts with 'lolol_shop' ? 'active' }}">
						<a href="{{ path('lolol_shop_champions') }}"><i class="fa fa-shopping-cart"></i> {{ 'shop.menu'|trans }}</a>
					</li>
					<!-- User -->
					<li class="dropdown {{ app.request.attributes.get('_route') starts with 'lolol_user' ? 'active' }}">
					<a href="#"
						class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> {{ 'menu.user'|trans }}
							<b class="caret"></b>
					</a>
						<ul class="dropdown-menu" role="menu"
							aria-labelledby="dropdownMenu1">
							<li role="presentation"><a role="menuItem" href="{{ path('lolol_team_myTeams') }}"><i class="fa fa-users fa-fw"></i> {{ 'menu.team.myTeams'|trans }}</a></li>
							<li role="presentation"><a role="menuItem" href="{{ path('lolol_team_teamBuilder') }}"><i class="fa fa-plus-circle fa-fw"></i> {{ 'menu.team.createNewTeam'|trans }}</a></li>
							<li class="divider"></li>
							<li role="presentation"><a role="menuItem" href="{{ path('lolol_user_settings') }}"><i class="fa fa-wrench"></i> {{ 'menu.user.settings'|trans }}</a></li>
							<li class="divider"></li>
							<li role="presentation"><a role="menuItem" href="{{ path('fos_user_security_logout') }}"><i class="fa fa-sign-out"></i> {{ 'menu.user.logOut'|trans }}</a></li>
						</ul>
					</li>
				{% else %}
					<li>
						<a href="#" class="popover-sign-in" data-toggle="popover" title="" role="button" data-original-title="Sign in" data-placement="bottom" data-content='{{ render(controller('LololUserBundle:Security:login')) }}'><i class="fa fa-sign-in"></i> {{ 'menu.user.signIn'|trans }}</a>
					</li>
					<li>
					<a href="{{ path('fos_user_registration_register') }}"><i class="fa fa-pencil-square-o"></i> {{ 'menu.user.signUp'|trans }}</a>
					</li>
				{% endif %}
				</ul>
				
				
	    		<ul class="nav navbar-nav navbar-right">
				{% if is_granted('ROLE_ADMIN') %}
	      			<li><a href="#"><i class="fa fa-cog"></i> Admin</a></li>
	      		{% endif %}
	    		{% if is_granted('ROLE_SUPER_ADMIN') %}
					<li class="dropdown {{ app.request.attributes.get('_route') starts with 'lolol_super_admin' ? 'active' }}">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-cogs"></i> Super admin<b class="caret"></b></a>
						<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
							<li role="presentation"><a role="menuItem" href="{{ path('lolol_super_admin_retrieveChampions') }}"><i class="fa fa-cloud-download fa-fw"></i> Retrieve champions</a></li>
							<li role="presentation"><a role="menuItem" href="{{ path('lolol_super_admin_populateChampions') }}"><i class="fa fa-bolt fa-fw"></i> Populate champions</a></li>
						</ul>
	      		{% endif %}
	      			<!--  <li>&nbsp;</li>  -->
		    	</ul>
	    	</div>
		</div>
	</div>
	
		
	<div class="container">
		<div id="content">
			{% for infoDetail in app.session.flashbag.get('info-detail') %}
	      	<div class="row">
				<div id="accordion" class="alert alert-info col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 fade in">
					<button type="button" class="close" data-dismiss="alert" aria-hidden="true"><small>x</small></button>
					{% for title in app.session.flashbag.get(infoDetail ~ '-title' ) %}
					<p><strong>Info:</strong> {{ title }}</p>
					{% endfor %}
					<p id="collapseOne" class="collapse">
						{% for detail in app.session.flashbag.get(infoDetail ~ '-detail' ) %}
						{{ detail }}<br />
						{% endfor %}
					</p>
					<p><a class="btn btn-default btn-sm" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Details &raquo;</a></p>
				</div>		
			</div>	
      		{% endfor %}
      		
			{% for info in app.session.flashbag.get('info') %}
	      	<div class="row">
				<div class="alert alert-info col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 fade in">
					<button type="button" class="close" data-dismiss="alert" aria-hidden="true"><small>x</small></button>
					<p><strong>Info:</strong></p><p>{{ info }}</p>
				</div>		
			</div>	
      		{% endfor %}
      		
			{% for error in app.session.flashbag.get('error') %}
	      	<div class="row">
				<div class="alert alert-danger col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 fade in">
					<button type="button" class="close" data-dismiss="alert" aria-hidden="true"><small>x</small></button>
					<p><strong>{{ 'alert.error'|trans }}:</strong></p><p>{{ error }}</p>
				</div>		
			</div>
      		{% endfor %}
      		
      		{% if error is defined %}
		      	<div class="row">
					<div class="alert alert-danger col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 fade in">
						<button type="button" class="close" data-dismiss="alert" aria-hidden="true"><small>x</small></button>
						<p><strong>{{ 'alert.error'|trans }}:</strong></p><p>{{ error }}</p>
					</div>		
				</div>
			{% endif %}
      		
      		{% block lolol_alert %} {% endblock %}

    		{% block body %}
			<div class="row">
				<div class="col-xs-10">
					<h4>{% block lolol_title %}{{ title }}{% endblock %}</h4>
				</div>
				<div class="col-xs-2">
					{% if app.user %}
					{% if app.user.displayHelp %}<button class="btn btn-primary" data-toggle="modal" data-target="#helpModal"><i class="fa fa-question-circle"></i> {{ 'help.title'|trans }}</button>{% endif %}
					{% endif %}
					{% block lolol_help %}
					<!-- Modal -->
					<div class="modal fade" id="helpModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
									<h4 class="modal-title" id="myModalLabel">{% block lolol_help_title %}{{ 'help.title'|trans }}{% endblock %}</h4>
								</div>
								<div class="modal-body">
					        	{% block lolol_help_body %}{% endblock %}
								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-default" data-dismiss="modal">{{ 'help.close'|trans }}</button>
								</div>
							</div><!-- /.modal-content -->
						</div><!-- /.modal-dialog -->
					</div><!-- /.modal -->
					{% endblock %}
				</div>
			</div>
			<hr>
			{% block lolol_main %}{% endblock %}
			{% endblock %}
		
	    </div>

		<hr>

		<footer>
			<p>Tout droit &copy;</p>
		</footer>
	</div>
	</div>
	<div id="loading-indicator" style="display: none"><i class="fa fa-spinner fa-spin fa-3x"></i></div>
</body>
</html>